<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-05 18:00:56
 * @LastEditors: cuiyingchun
 * @LastEditTime: 2022-11-05 21:55:02
 * @Introduce: 招采问答
-->
<template>
  <div class="questionAnswer">
    <div class="questionAnswerMain">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="精彩问答" name="first">
        </el-tab-pane>
        <el-tab-pane label="历史问答" name="second"></el-tab-pane>
      </el-tabs>
      <div class="typeGroup">
        <div class="typeList" v-for="(item,index) in typeList" :key="index" @click="typeGroupClick(index)">
          <!-- <span>{{item}}</span> -->
          <el-button :type="typeGroupIndex==index?'primary':'text'" round size="mini">{{item}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      typeGroupIndex: 0,
      activeName: 'first',
      typeList: ['全部', '招标投标', '政府采购', '政府采购', '政府采购', '政府采购', '政府采购', '政府采购']
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    typeGroupClick (index) {
      this.typeGroupIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
  .questionAnswerMain{
    width:1200px;
    margin: auto;
    /deep/ .el-tabs__nav-wrap::after{
      display: none;
    }
    /deep/ .el-tabs__item{
      font-size: 16px;
      font-weight: bold;
    }
    /deep/ .el-tabs__active-bar{
      height: 2.5px;
    }
    .typeGroup{
      .typeList+.typeList{
        margin-left: 10px;
      }
      .typeList{
        display: inline-block;
        /deep/ .el-button--text{
          color: #606266;
        }
        /deep/ .el-button--primary:hover{
          background: #409EFF;
        }
        /deep/ .el-button--primary{
          background: #409EFF;
        }
      }
    }
  }
</style>
